<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="news-detail bg-white">
		<!-- 标题信心 -->
		<view class="news-detail-header py-[20rpx] px-[30rpx]">
			<view class="text-3xl font-medium">{{ newsData.title }}</view>

			<view class="flex mt-[20rpx] text-xs">
				<view class="text-muted mr-[40rpx] flex-1">{{ newsData.start_time }} &nbsp; - &nbsp; {{ newsData.end_time }}</view>
			</view>
		</view>

		<!-- 咨询内容 -->
		<view class="news-detail-section bg-white p-[24rpx]">
			<!-- 内容 -->
			<view class="mt-[20rpx]">
				<u-parse :html="newsData.content"></u-parse>
			</view>
		</view>

		<!-- 报名 -->
		<view class="mt-[20rpx] mx-[26rpx]" v-if="is_sign">
			<u-form borderBottom :label-width="150">
				<u-form-item v-for="(item, index) in formData" :key="index" :label="item.name" borderBottom>
					<u-input class="flex-1" type="text" v-model="item.key" :border="false" placeholder="请输入" />
				</u-form-item>
			</u-form>
		</view>

		<view class="mt-[100rpx] mx-[26rpx]">
			<u-button :disabled="!is_sign" type="primary" shape="circle" @click="submit">{{ is_sign ? '立即报名' : '已报名' }}</u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getHuodonDetail, huodongBaoming } from '@/api/shop';

const newsData = ref<any>({});
let hid = '';

let is_sign = true;

let formData = reactive([]);

const getData = async (id) => {
	newsData.value = await getHuodonDetail({ id });
	if (newsData.value.is_sign == 1) {
		is_sign = false;
	}
	newsData.value.param.forEach((item) => {
		if (item.isChecked == 1) {
			(item.key = ''), formData.push(item);
		}
	});
};

const submit = async () => {
	for (let i = 0; i < formData.length; i++) {
		if (!formData[i].key && formData[i].isRequired == 1) {
			uni.$u.toast('请输入' + formData[i].name);
			return;
		}
	}
	const object = Object.fromEntries(formData.map(({ value, key }) => [value, key]));
	object.hid = hid;
	await huodongBaoming(object);
	uni.$u.toast('操作成功');
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
};

onLoad((options: any) => {
	hid = options.id;
	getData(hid);
});
</script>

<style lang="scss">
.news-detail {
	height: 100%;
	background: rgba(255, 255, 255, 0.95);

	&-header {
		border-bottom: 2rpx solid #f8f8f8;
	}
}
</style>
